<template>
  <div class="demo-collapse">
    <el-collapse accordion>
      <el-collapse-item name="1">
        <template #title
          >&nbsp;&nbsp; 展开查询<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>
          <el-row
            :gutter="20"
            style="width: 1000px; margin-top: -30px; margin-left: 20px"
          >
            <el-col :span="6"
              ><div class="grid-content ep-bg-purple" />
              订单编号
              <el-input v-model="query.purchasingNo" style="width: 280px" />
            </el-col>
            <el-col :span="6" style="margin-left: 170px"
              ><div class="grid-content ep-bg-purple" />
              订单名称<el-input
                v-model="query.purchasingName"
                style="width: 280px"
              />
            </el-col>

            <el-col :span="6"
              ><div class="grid-content ep-bg-purple" />
              <span style="margin-left: 170px">订单类型</span>
              <el-select
                v-model="query.purchasingTypeId"
                placeholder="请选择"
                style="width: 280px; margin-left: 170px"
              >
                <el-option
                  v-for="item in options"
                  :label="item.purchasingTypeName"
                  :value="item.purchasingTypeId"
                />
              </el-select>
            </el-col>
          </el-row>

          <el-row
            :gutter="20"
            style="width: 1000px; margin-top: -30px; margin-left: 20px"
          >
            <el-col :span="6"
              ><div class="grid-content ep-bg-purple" />
              供应商<el-select
                v-model="query.suppliersId"
                style="width: 280px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options1"
                  :label="item.suppliersName"
                  :value="item.suppliersId"
                />
              </el-select>
            </el-col>
            <el-col :span="6" style="margin-left: 170px"
              ><div class="grid-content ep-bg-purple" />
              所属项目<el-select
                v-model="query.projectId"
                style="width: 280px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options2"
                  :label="item.projectName"
                  :value="item.projectId"
                />
              </el-select>
            </el-col>

            <el-col :span="6"
              ><div class="grid-content ep-bg-purple" />
              <span style="margin-left: 170px">状态</span
              ><el-select
                v-model="query.purchasingStatus"
                style="width: 280px; margin-left: 170px"
              >
                <el-option label="新建" :value="1" />
                <el-option label="确认" :value="2" />
              </el-select>
            </el-col>

            <el-col :span="6" style="margin-left: 1000px"
              ><div class="grid-content ep-bg-purple" />
              <el-button @click="resetForm()">重置</el-button>
              <el-button type="primary" style="width: 100px" @click="GetData()"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>

  <div style="background-color: white; width: 100%; height: 100%">
    <h3 style="margin: 15px">
      <span style="font-size: 17px; font-weight: 700">采购/委外订单列表</span>
    </h3>
    <el-button
      type="success"
      style="float: right; margin-top: -40px; margin-right: 170px"
      @click="router.push('/ProducManagement/PurchasingsAdd')"
      >+新增采购订单</el-button
    >
    <el-button
      type="primary"
      style="float: right; margin-top: -40px; margin-right: 90px"
      @click="Export()"
      >导出</el-button
    >
      <!-- 按钮绑定打印 -->
      <el-button type="primary" style="float: right;margin-top: -40px;margin-right: 20px;" @click="print()">打印</el-button>
      <!-- <el-button type="info" style="float: right;margin-top: -40px;margin-right: 20px;"  v-print="{popTitle:'销售订单报告',id: 'printDiv'}">打印</el-button> -->
    <hr style="background-color: #d3d3d3; height: 1px; border: none" />
    <div style="margin: 20px">
      <el-table
        :data="tableData"
        stripe
        style="width: 2000px;"
        border
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="purchasinId" label="序号" width="80px" />
        <el-table-column prop="purchasingNo" label="订单编码    " width="180px" />
        <el-table-column prop="purchasingName" label=" 订单名称" width="120px" />
        <el-table-column
          prop="purchasingTypeName"
          label="    订单类型"
          width="120px"
        />
        <el-table-column prop="projectName" label="所属项目" width="120px" />
        <el-table-column prop="suppliersName" label="供应商" width="220px" />
        <el-table-column prop="signUpTime" label="签订日期" width="120px">
          <template #default="{ row }">
            {{ moment(row.signUpTime).format("YYYY-MM-DD") }}
          </template>
        </el-table-column>
        <el-table-column prop="billMaking" label="制单人" width="120px" />
        <el-table-column prop="departmentName" label="制单部门" width="120px" />
        <el-table-column prop="handleTime" label="创建时间" width="180px">
          <template #default="{ row }">
            {{ moment(row.handleTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column prop="purchasingStatus" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.purchasingStatus == 1" type="info">新建</el-tag>
            <el-tag v-else type="primary">确认</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态">
          <template #default="{ row }">
            <el-tag v-if="row.approvalStatus == 0" type="info">未提交</el-tag>
            <el-tag v-else-if="row.approvalStatus == 1" type="primary">已提交</el-tag>
            <el-tag v-else-if="row.approvalStatus == 2" type="success">已审批</el-tag>
            <el-tag v-else type="warning">已驳回</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{row}">
            <el-button
              size="small"
              @click="router.push('/ProducManagement/PurchasingsEdit?purchasinId='+row.purchasinId+'&purchasingNo='+row.purchasingNo)"
              >编辑</el-button
            >
            <el-button size="small" @click="purchasinDel(row.purchasinId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div>
        <el-pagination
          v-model:current-page="query.pageIndex"
          v-model:page-size="query.pageSize"
          layout="prev, pager, next"
          :total="query.totalCount"
          class="mt-4"
          @current-change="handleCurrentChange"
          style="float: right"
        />
        <span style="float: right; margin-top: 4px"
          >共{{ query.totalCount }}条</span
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import moment from "moment";

const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
const apiurl1 = import.meta.env.VITE_APP_API_URL_ProductionAdd;
import router from "@/router";
import { InfoFilled } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {hiprintPlugin} from 'vue-plugin-hiprint'

// hiprintPlugin.disAutoConnect()
hiprint.init();
import dy from './dy.json'
 function print(){
  const printData = {
    purchasin:[
            {
              purchasinId:"1",
              purchasingNo:"24202419515043",
              purchasingName:"77777",
              purchasingTypeName:"标准采购订单",
              projectName:"上海新项目",
              suppliersName:"吉林粮食集团有限公司",
              signUpTime:"2024-12-15 16:00:00",
              departmentName:"仓储部",
            },
            {
              purchasinId:"2",
              purchasingNo:"24202420303699",
              purchasingName:"11111111111",
              purchasingTypeName:"标准采购订单",
              projectName:"上海新项目",
              suppliersName:"水稻集团有限公司",
              signUpTime:"2024-12-23 16:00:00",
              departmentName:"仓储部",
            }
         ]
}

const hiprintTemplate = new hiprint.PrintTemplate({ template: dy});
    // 打印
    hiprintTemplate.print(printData);
 }
  






//订单类型
const options = ref([]);
const OrderType = () => {
  axios
    .post(apiurl + "/api/ShowProducManagement/PurchasingTypeShow", {})
    .then((res) => {
      options.value = res.data.data;
    });
};

//供应商
const options1 = ref([]);
const SuppliersList = () => {
  axios
    .post(apiurl + "/api/ShowProducManagement/SupplierShow", {})
    .then((res) => {
      options1.value = res.data.data;
    });
};

//项目
const options2 = ref([]);
const Projects = () => {
  axios.post(apiurl + "/api/ShowProduction/GetProjectShow", {}).then((res) => {
    options2.value = res.data.data;
  });
};
//查询分组字段
const query = reactive({
  purchasingNo: "",
  purchasingName: "",
  purchasingTypeId: "",
  projectId: "",
  purchasingStatus: "",
  suppliersId: "",
  pageIndex: 1,
  pageSize: 8,
  totalCount: 0,
  totalPage: 0,
});

//定义数组 存储数据
const tableData = ref([]);
//显示
const GetData = () => {
  axios
    .post(apiurl + "/api/ShowProducManagement/PurchasingsQuery", {
      purchasingNo: query.purchasingNo,
      purchasingName: query.purchasingName,
      purchasingTypeId: query.purchasingTypeId || 0,
      projectId: query.projectId || 0,
      purchasingStatus: query.purchasingStatus || 0,
      suppliersId: query.suppliersId || 0,
      pageIndex: query.pageIndex,
      pageSize: query.pageSize,
    })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data.list;
      query.totalCount = res.data.data.totalCount;
      query.totalPage = res.data.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};

//钩子函数
onMounted(() => {
  GetData();
  Projects();
  OrderType();
  SuppliersList();
});

//分页
const handleCurrentChange = (val: number) => {
  query.pageIndex = val;
  GetData();
};

//删除
const purchasinDel = (purchasinId: any) => {
  ElMessageBox.confirm("确定要删除么?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios
        .post(apiurl1 + "/api/ProducManagement/DelPurchasings", {
          purchasinId: purchasinId,
        })
        .then((res) => {
          console.log(res);
          ElMessage.success("删除成功");
          GetData();
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "删除失败",
      });
    });
};

//重置
const resetForm = () => {
  query.purchasingNo = "";
  query.purchasingName = "";
  query.purchasingTypeId = "";
  query.projectId = "";
  query.purchasingStatus = "";
  query.suppliersId = "";
  GetData();
};

//修改
const purchasinUpdate = (purchasinId: any) => {
  router.push({
    path: "/ProducManagement/PurchasingsEdit",
    query: {
      purchasinId: purchasinId,
    },
  });
};

//导出
const Export = () => {
  location.href = apiurl + `/api/ShowProducManagement/PurchasingsExportExcel`;
};

</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
